<template>
  <view class="s_list">
    <view class="s_item" v-for="(item, index) in shopList" :key="index">
      <view class="dwrap">
        <image
          class="ding"
          lazy-load
          src="@/static/ding.png"
          mode="widthFix"
        ></image>
      </view>
      <view class="swrap">
        <view class="sname">{{ item.poi_name }}</view>
        <view class="dis"
          >距离您：<text>{{ item.juli }}</text
          >公里</view
        >
      </view>
      <view class="dao" @click="goMap(item)">
        <image
          class="dimg"
          lazy-load
          src="@/static/dao.png"
          mode="widthFix"
        ></image>
        <view>导航</view>
      </view>
      <view class="dao" @click="phoneclick">
        <image
          class="dimg call"
          lazy-load
          src="@/static/phone.png"
          mode="widthFix"
        ></image>
        <view>电话</view>
      </view>
    </view>
    <u-loadmore :status="status" />
  </view>
</template>

<script>
import * as GoodsApi from "@/api/goods";
export default {
  data() {
    return {
      limit: 10,
      page: 1,
      status: "loadmore",
      position: {},
      shopList: [],
    };
  },
  onLoad() {
    const that = this;
    tt.getLocation({
      type: "gcj02", // 默认为 wgs84，返回 gps 坐标
      success(res) {
        // 处理成功获取位置信息
        console.log(res);
        that.position = res;
        that.getShop(true);
      },
      fail(err) {
        // 处理失败情况
        that.getShop(true);
        console.error("获取位置信息失败", err);
      },
    });
  },
  methods: {
    phoneclick() {
      tt.makePhoneCall({
        phoneNumber: "4009673811",
        success: function () {
          // tt.showToast({
          //   title: 'success'
          // });
        },

        fail(err) {
          // tt.showToast({
          //   icon: 'none',
          //   title: err.errMsg
          // });
          console.log(err.errMsg);
        },
      });
    },
    goMap(data) {
      console.log("打开定位", data);
      tt.openLocation({
        latitude: parseFloat(data.latitude), // 纬度
        longitude: parseFloat(data.longitude), // 经度
        name: data.poi_name, // 目的地名称
        //address: data.poi_name // 目的地详细地址
      });
    },
    async getShop(reset = false) {
      if (reset) {
        this.page = 1;
        this.status = "loading";
      }
      if (this.status == "nomore") return false;
      this.status = "loading";
      const param = {
        limit: this.limit,
        page: this.page,
        lat: this.position.latitude || "",
        lng: this.position.longitude || "",
      };
      if (this.loading) return false;
      this.loading = true;
      const result = await GoodsApi.mendian(param);
      if (result.status != 200) {
        return this.$toast(result.message);
      }
      const shopList = [];
      for (let k in result.data.list) {
        const shop = result.data.list[k];
        if (isFinite(shop.distance)&&shop.distance!=-1) {
          shop.juli = (shop.distance / 1000).toFixed(2);
        } else {
          shop.juli = "--";
        }

        shopList.push(shop);
      }
      if (shopList.length < this.limit) {
        this.status = "nomore";
      } else {
        this.status = "loadmore";
      }
      if (this.page > 1) {
        shopList = this.shopList.concat(shopList);
      }
      this.shopList = shopList.sort((a, b) => a.distance - b.distance);
      this.$emit("count", this.shopList.length);
      this.page++;
      this.loading = false;
    },
  },
  onReachBottom() {
    if (this.loading || this.status == "nomore") return false;
    this.getShop();
  },
};
</script>

<style lang="scss" scoped>
.dwrap {
  flex: 1;
}
.swrap {
  flex: 6;
}
.dao {
  flex: 1;
  text-align: center;
}
.s_item {
  padding: 20rpx;
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
  margin: 20rpx 0;
  justify-content: space-between;
  .ding {
    display: block;
    width: 70rpx;
    height: 0;
  }
  .dimg {
    display: block;
    margin: 0 auto 0;
    width: 60rpx;
    height: 0;
    &.call {
      transform: scale(0.8);
    }
  }
  .sname {
    color: #000;
    font-weight: bold;
    font-size: 30rpx;
  }
  .dis {
    margin-top: 10rpx;
    color: #999;
    font-size: 30rpx;
    text {
      color: #f00;
      margin-right: 5rpx;
    }
  }
}
</style>
